/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<form @submit="submitStore">
			<view class="store-info">
				<view class="store-name">
					<view class="store-title">店铺名称：</view>
					<input class="store-input" @input="setStoreName" :value="storeInfo.store_name" name="store_name">
					</input>
				</view>
				<view class="store-name">
					<view class="store-title">真实姓名：</view>
					<input class="store-input" @input="setName" :value="storeInfo.true_name" name="true_name">
					</input>
				</view>
				<view class="store-name">
					<view class="store-title">手机号：</view>
					<input class="store-input" @input="setMobile" :value="storeInfo.mobile" name="mobile">
					</input>
				</view>
				<view class="store-name">
					<view class="store-title">QQ：</view>
					<input class="store-input" @input="setqq" :value="storeInfo.qq" name="qq">
					</input>
				</view>
			</view>
			<view class="store-logo">
				<view class="store-title">店铺图片</view>
				<image @tap="changeStoreImg" class="store-img" :src="storeInfo.store_img?hostUrl+storeInfo.store_img:hostUrl+defaultImg" role="img"></image>
				<button class="store-btn" form-type="submit" role="button" aria-disabled="false">确认修改</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {postUserStore,getUserStore,putUserStore} from "@/api/api.js";
	import common from "@/common/common.js";
	import config from "@/api/config.js";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				hostUrl:config.host,//路径前缀
				storeInfo:"",//店铺信息
				
				defaultImg:"",
				params:{
					store_name:"",
					true_name:"",//真实姓名
					mobile:"",//手机
					
					qq:"",//qq
					store_img:"",
				}
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(){
			if(this.hasLogin){
				
				this.getUserStore()
			}else{
				common.islogin()
			}
		},
		methods:{
			/*店铺信息*/
			getUserStore(){
				getUserStore().then(res=>{
					if(res){
						this.storeInfo=res;
						this.params.store_name=res.store_name;
						this.params.true_name=res.true_name;
						this.params.mobile=res.mobile;
						this.params.qq=res.qq;
						this.params.store_img=res.store_img
					}
					console.log(res)
				})
			},
			/*店铺名称*/ 
			setStoreName(e){
				this.params.store_name=e.detail.value	
			},
			/*真实姓名*/
			setName(e){
				this.params.true_name=e.detail.value
			},
			/*手机*/ 
			setMobile(e){
				this.params.mobile=e.detail.value
			},
			/*qq*/
			setqq(e){
				this.params.qq=e.detail.value
			},
			/*上传图片*/ 
			changeStoreImg(){
				var that =this;
				uni.chooseImage({
					count: 1, //最多1张图片,默认9
					sizeType: ['compressed', 'original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						// console.log(res)
						uni.uploadFile({
							url:"/api" + '/mall/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								"type":"user_store",
							},
							
							success: function (res) {
								console.log(JSON.parse(res.data).result)
								that.params.store_img=JSON.parse(res.data).result
								that.defaultImg=JSON.parse(res.data).result
								// that.userInfo.head_pic=JSON.parse(res.data).result
								// let params={
								// 	"head_pic":JSON.parse(res.data).result
								// }
								
								
							}
						});
					}
				});
			},
			/*提交*/
			submitStore(){
				if(this.params.store_name==""){
					common.toast("none","请输入店铺名称",2000)
					return
				}
				if(this.params.true_name==""){
					common.toast("none","请输入真实姓名",2000)
					return
				}
				if(this.params.mobile==""){
					common.toast("none","请输入手机号",2000)
					return
				}
				/*信息为空就执行提交，否则执行更新*/
				if(this.storeInfo==""){
					this.postUserStore(this.params)
				}else{
					
					this.putUserStore(this.params)
				}
				
			},
			/*添加店铺xinx*/
			postUserStore(params){
				postUserStore(params).then(res=>{
					console.log(res)
				})
			},
			/*修改店铺信息*/ 
			putUserStore(params){
				putUserStore(params).then(res=>{
					if(res.status==1){
						common.toast("none","修改成功!",2000)
					}
					console.log(res)
				})
			}
			
		}
	}
</script>

<style lang="scss">
	/* set_store.wxss */
	.store-info {
		background-color: white;
		padding: 0 10rpx;
		width: 710rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin: 0 auto;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.store-name {
		height: 100rpx;
		border-bottom: 1px solid #f3f3f3;
	}

	.store-info .store-name:last-child {
		border-bottom: 0;
	}

	.store-title {
		float: left;
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
	}

	.store-input {
		font-size: 28rpx;
		color: #7f7f7f;
		height: 95rpx;
		line-height: 95rpx;
		vertical-align: middle;
	}

	.store-line {
		height: 2rpx;
		background-color: #f5f5f5;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.store-logo {
		width: 710rpx;
		height: 790rpx;
		background-color: white;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.store-img {
		width: 100%;
		height: 294rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.store-btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		vertical-align: middle;
		text-align: center;
		margin-left: 10%;
		margin-right: 10%;
		background-color: red;
		color: white;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
</style>
